<template>
  <view>
    <!-- <view class="back-button" @click="goBack">返回</view> -->
    <scroll-view scroll-y="true" class="detail-list">
      <view
        v-for="item in hrmAppraiseItemRecordList"
        :key="item.id"
        class="detail-item"
      >
        <!-- 第一行: 年度 -->
        <view class="first-row">
          <text class="year">年度: {{ item.year }}</text>
        </view>
        <!-- 第二行: 指标内容 -->
        <view class="second-row">
          <text class="name">{{ truncatedName(item.name) }}</text>
        </view>
        <!-- 第三行: 指标得分 -->
        <view class="third-row">
          <text class="score">得分: {{ item.score }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getRecord } from "@/api/work/record";
export default {
  data() {
    return {
      hrmAppraiseItemRecordList: [],
    };
  },
  onLoad(options) {
    const id = options.id;
    this.fetchDetails(id);
  },
  methods: {
    // goBack() {
    //   uni.navigateBack();
    // },
    fetchDetails(id) {
      getRecord(id).then((response) => {
        this.hrmAppraiseItemRecordList =
          response.data.hrmAppraiseItemRecordList;
      });
    },
    truncatedName(name) {
      return name.length > 15 ? name.slice(0, 15) + "..." : name;
    },
  },
};
</script>

<style scoped>
.back-button {
  font-size: 16px;
  color: #007aff;
  padding: 10px;
}

.detail-list {
  padding: 15px;
}

.detail-item {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.first-row,
.second-row,
.third-row {
  margin-bottom: 5px;
  color: #555;
}

.year {
  font-size: 14px;
  font-weight: bold;
}

.name,
.score {
  font-size: 14px;
}
</style>
